<template>
  <su-popup :show="show" round="10" :showClose="true" @close="closeAuthModal">
    <div class="wrap">
      <div class="title">请上传支付凭证</div>
      <view class="image">
        <s-uploader
          file-mediatype="image"
          :imageStyles="{ width: '100%', height: 150, border: true }"
          @success="add"
        >
          <div v-if="!imgUrl" style="text-align: center; position: absolute; color: #999"
            ><div style="color: #333"> 点击上传 </div>
            <div style="font-size: 12px">
              预计1-3个工作日审核完成。 <br />只能上传jpg/png格式文件，文件不能超过10MB
            </div></div
          >
          <image class="icon" :src="imgUrl" mode="aspectFill"></image>
        </s-uploader>
      </view>
      <div>
        <button class="ss-reset-button save-btn" @tap="confirm"> 确认 </button>
      </div>
    </div>
  </su-popup>
</template>

<script setup>
  import sheep from '@/sheep';
  import OrderApi from '@/sheep/api/trade/order.js';

  const props = defineProps({
    orderInfo: {
      type: Object,
      default() {},
    },
  });
  const emits = defineEmits(['success']);
  const show = ref(false);
  const imgUrl = ref('');
  const add = (chooseImageRes) => {
    nextTick(() => {
      const tempUrl = chooseImageRes.tempFilePaths[0];
      console.log('a', tempUrl);
      imgUrl.value = tempUrl;
    });
  };
  const closeAuthModal = () => {
    show.value = false;
  };
  defineExpose({ show });

  const confirm = async () => {
    if (!imgUrl.value) return;
    const params = {
      payChannelCode: props.payChannelCode || props.orderInfo.payChannelCode,
      id: props.orderInfo.merchantOrderId || props.orderInfo.id,
      payOrderId: props.orderInfo.id || props.orderInfo.payOrderId,
      payVoucher: imgUrl.value,
    };
    const { data, code } = await OrderApi.uploadPayFile(params);
    if (code !== 0) return;
    emits('success');
    console.log(111);
  };
</script>

<style lang="scss" scoped>
  .wrap {
    height: 300px;
    padding: 20px;
  }
  .title {
    text-align: center;
  }
  .image {
    margin: 30px 0;
  }
  .icon {
    width: 100%;
    height: 150px;
  }
  .save-btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    color: $white;
    margin: 0 auto;
  }
</style>
